<template>
  <div>
    <div class="title">
      <h6></h6>
      裁判文书
    </div>
    <div class="content">
      <div class="table" v-if="list">
        <el-table
          :data="list"
          border
          highlight-current-row
          stripe
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D',
          }"
        >
          <!-- <el-table-column
            prop="number"
            label="序号"
            width="80"
            align="center"
            fixed="left"
          >
          </el-table-column> -->
          <el-table-column
            prop="title"
            label="文书标题"
            width="320"
            align="center"
          >
            <template #default="scope">{{ getData(scope.row.title) }}</template>
          </el-table-column>
          <el-table-column
            prop="casenum"
            label="案号"
            width="240"
            align="center"
          >
            <template #default="scope">{{
              getData(scope.row.casenum)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="pctype"
            label="当事人立场"
            width="150"
            align="center"
          >
            <template #default="scope">{{
              getData(scope.row.pctype)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="casetopic"
            label="案由"
            width="240"
            align="center"
          >
            <template #default="scope">{{
              getData(scope.row.casetopic)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="sslong"
            label="审结日期"
            width="150"
            align="center"
          >
            <template #default="scope">{{
              getData(scope.row.sslong)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="mstype"
            label="案件类型"
            width="150"
            align="center"
          >
            <template #default="scope">{{
              getData(scope.row.mstype)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="money"
            label="涉案金额（元）"
            width="210"
            align="center"
          >
            <template #default="scope"
              >{{ getArea(scope.row.money) }}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="详情"
            min-width="150"
            align="center"
            fixed="right"
          >
            <template #default="scope"
              ><span
                style="
                  color: #0a7be0;
                  cursor: pointer;
                  text-decoration: underline;
                "
                @click="examine(scope.$index, list)"
                >查看</span
              ></template
            >
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination" v-if="list">
        <el-pagination
          background
          layout="prev, pager, next"
          @next-click="nextClick()"
          @prev-click="prevClick()"
          @current-change="handlePageChange"
          :total="pages * 10"
        ></el-pagination>
      </div>
    </div>
    <el-dialog title="裁判文书详情" v-model="dialogVisible" width="50%">
      <div class="dialog-center" v-if="tableData">
        <table id="table">
          <tbody id="tbody">
            <tr>
              <td scope="row" class="td">文书标题</td>
              <td scope="row" colspan="3">{{ getData(tableData.title) }}</td>
            </tr>
            <tr>
              <td scope="row" class="td">案号</td>
              <td scope="row">{{ getData(tableData.casenum) }}</td>
              <td scope="row" class="td">当事人立场</td>
              <td scope="row">{{ getData(tableData.pctype) }}</td>
            </tr>
            <tr>
              <td scope="row" class="td">案由</td>
              <td scope="row">{{ getData(tableData.casetopic) }}</td>
              <td scope="row" class="td">审结日期</td>
              <td scope="row">{{ getData(tableData.sslong) }}</td>
            </tr>
            <tr>
              <td scope="row" class="td">案件类型</td>
              <td scope="row">{{ getData(tableData.mstype) }}</td>
              <td scope="row" class="td">涉案金额（元）</td>
              <td scope="row">{{ getArea(tableData.money) }}</td>
            </tr>
            <tr>
              <td scope="row" class="td">判决结果</td>
              <td scope="row" colspan="3">
                {{ getData(tableData.content) }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { myPostFetch } from "@/api/report";
import { dataDispose, AreaDisposeCurrency } from "@/utils/filters.js";
export default {
  props: {
    name: String,
  },
  data() {
    return {
      dialogVisible: false,
      tableData: null,
      pageNum: 1,
      pageSize: 10,
      pages: 1,
      list: null,
    };
  },

  mounted() {
    this.findkjapply();
  },
  methods: {
    // 数据处理 为空显示为 -
    getData(value) {
      return dataDispose(value);
    },
    // 金额处理
    getArea(value) {
      return AreaDisposeCurrency(value);
    },
    // 点击查看
    examine(index, item) {
      this.dialogVisible = true;
      this.tableData = item[index];
    },
    // 获取信息
    async findkjapply() {
      let url = "/credit/getCaipan";
      let params = {
        name: this.name,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        pages: 1,
      };
      let data = await myPostFetch(url, params);
      if (data.code == 500) return (this.list = []);
      this.list = data.rows;
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].number = (this.pageNum - 1) * 10 + i + 1;
      }
      this.pages = Math.ceil(data.total / this.pageSize);
    },
    //点击下一页
    nextClick() {
      this.pageNum += 1;
      this.findkjapply();
    },
    //点击上一页
    prevClick() {
      this.pageNum -= 1;
      this.findkjapply();
    },
    //点击数字改变page的值
    handlePageChange(currentPage) {
      this.pageNum = currentPage;
      this.findkjapply();
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.title {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin: 25px 0;
  h6 {
    width: 5px;
    height: 18px;
    background-color: #0a7be0;
    margin-right: 10px;
  }
  .content {
    position: relative;
    box-sizing: border-box;
    background: #ffffff;
    // 表格
    .table {
      box-sizing: border-box;
      width: 100%;
      background-color: #fff;
      height: 100%;
      margin-bottom: 20px;
      cursor: pointer;
      overflow: auto;
      .span {
        display: inline-block;
        // width: 0.1563px;
        // height: 0.125px;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 5px;
        color: #ccc;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        margin-right: 10px;
      }
      .span1 {
        display: inline-block;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        margin-right: 5px;
        color: #3f6ef2;
        border-bottom: 1px solid #3f6ef2;
        cursor: pointer;
      }
      .nactive {
        font-size: 14px;
        margin-right: 5px;
        color: #3f6ef2;
        border-bottom: 1px solid #3f6ef2;
      }
      .state-bar {
        span {
          font-size: 14px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #606266;
          margin-right: 10px;
        }
      }
    }
    // 分页器
    .pagination {
      display: flex;
      padding: 20px 30px 10px 10px;
      justify-content: right;
      position: absolute;
      bottom: 40px;
      right: 20px;
      span {
        font-size: 16px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #666666;
        margin-top: 2px;
      }
    }
  }
}
::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}
// 表格样式
::v-deep .el-table th.el-table__cell > .cell {
  font-size: 16px;
}
::v-deep.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
}
/* 表格 */
::v-deep .el-table {
  th.el-table__cell > .cell {
    font-size: 15px;
    font-weight: 400;
  }
  .cell {
    font-size: 15px;
  }
}
// 弹出框
.dialog-center {
  box-sizing: border-box;
  padding: 0 5px;
  // display: flex;
  // justify-content: center;
  width: 100%;
  // height: 660px;
}
// 表格
table {
  // width: 600px;
  margin-bottom: 30px;
  border-collapse: collapse;
}
table td {
  width: 300px;
  box-sizing: border-box;
  height: 42px;
  border: 1px solid #dbdbdb;
  padding: 10px 20px;
  font-size: 15px;
  font-family: SourceHanSansSC-Light;
  font-weight: 500;
  color: #545454;
  line-height: 26px;
}
table .td {
  width: 240px;
  font-size: 15px;
  font-weight: 500;
  color: #000000;
  text-align: center;
  background-color: #f2f9fc;
}
</style>
<style lang="scss">
/* 分页器 */
.el-pagination.is-background .el-pager li {
  border-radius: 20px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
}
/* 表格 */
.el-table {
  th.el-table__cell > .cell {
    font-size: 14px;
    font-weight: 400;
  }
  .cell {
    font-size: 14px;
  }
}
.el-table tr {
  height: 40px;
}
.el-table .el-table thead {
  height: 40px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f6ef2;
}
</style>
